@import '~@wordpress/base-styles/colors';
@import '~@wordpress/base-styles/mixins';
@import '~@wordpress/base-styles/variables';
@import '~@wordpress/base-styles/z-index';

$sidebar-width: 272px;
$transition-period: 100ms;

.wpcom-block-editor-nav-sidebar-nav-sidebar__click-guard {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	// Use the same z-index as the edit-post-layout header
	z-index: z-index( '.interface-interface-skeleton__header' );
	animation: wpcom-block-editor-nav-sidebar-nav-sidebar__fade $transition-period ease-out forwards;
	@include reduce-motion( 'animation' );

	&.is-fading-out {
		animation: wpcom-block-editor-nav-sidebar-nav-sidebar__fade $transition-period ease-in reverse;
		@include reduce-motion( 'animation' );
	}
}

@keyframes wpcom-block-editor-nav-sidebar-nav-sidebar__fade {
	0% {
		background-color: rgba( $black, 0 );
	}
	100% {
		background-color: rgba( $black, 0.7 );
	}
}

.wpcom-block-editor-nav-sidebar-nav-sidebar__container {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	bottom: 0;
	width: $sidebar-width;
	background: #23282e; // WP-admin gray to match the close button background color
	display: flex;
	flex-direction: column;
	box-shadow: -5px 0 20px $black;
	animation: wpcom-block-editor-nav-sidebar-nav-sidebar__slide $transition-period ease-out;
	@include reduce-motion( 'animation' );

	&.is-sliding-left {
		animation: wpcom-block-editor-nav-sidebar-nav-sidebar__slide $transition-period ease-in reverse;
		@include reduce-motion( 'animation' );
	}
}

@keyframes wpcom-block-editor-nav-sidebar-nav-sidebar__slide {
	0% {
		left: -$sidebar-width;
	}
	100% {
		left: 0;
	}
}

.wpcom-block-editor-nav-sidebar-nav-sidebar__header {
	height: $header-height;
	box-sizing: content-box;
	display: flex;
	flex: $header-height 0 0;
}

.wpcom-block-editor-nav-sidebar-nav-sidebar__site-title {
    padding: 8px 16px;
	margin-top: 14px;

	h2 {
		color: $white;
		margin: 0;
		font-size: $big-font-size;
		line-height: $default-line-height;
	}

	a {
		color: $light-gray-800;
	}
}

.wpcom-block-editor-nav-sidebar-nav-sidebar__dismiss-sidebar-button {
	position: fixed;
	top: 0;
	left: 0;
	height: $header-height !important;
}

.wpcom-block-editor-nav-sidebar-nav-sidebar__home-button {
	height: 46px;
	width: 100%;
	border: none !important;
	box-shadow: none !important;
	color: $white;
	flex-shrink: 0;
	padding: 8px 11px !important;
	margin: 14px 0;

	&:hover {
		color: $white;
	}

	&:focus {
		color: $white;
		border: 1px solid $white !important;
		box-shadow: none !important;
		outline: none !important;
		border-radius: 0;
		padding: 7px 10px !important;
	}
}

.wpcom-block-editor-nav-sidebar-nav-sidebar__list-heading {
	padding: $panel-padding;
	font-size: $big-font-size;
	color: $white;
}

.wpcom-block-editor-nav-sidebar-nav-sidebar__page-list {
	padding: 0;
	margin: 0;
	overflow-y: auto;
}

.wpcom-block-editor-nav-sidebar-nav-sidebar__bottom-buttons {
	&.is-scrollbar-present {
		border-top: 1px solid $dark-gray-600;
	}
}
